<template>
	<view style="display: flex;flex-direction: column;padding-top: 0rpx;">
		<u-sticky offset-top="0px">
			<!-- tab选中 -->
			<view style="display: flex;font-size: 30rpx;background: white;">
				<view @click="current=item.value" :class="[item.value==current?'text-white bg-127c72':'']"
					class="bt_primary"
					style="align-items: center;justify-content: center;display: flex;;flex: 0 0 25%;height: 80rpx;"
					v-for="item in tabList" :key="index">
					<rich-text style="text-align: center;" :nodes="item.name"></rich-text>
				</view>
			</view>
		</u-sticky>

		<!-- 内容区域 -->
		<view class="" style="flex: 1;padding: 20rpx 40rpx;">
			<!-- 分页tab -->
			<view v-show="current==1">
				<!-- 单个项目 -->
				<view v-for="item in 20" @click="handlerToPath(`/pages/life-daiqu-detail/life-daiqu-detail`)"
					style="display: flex;border-radius: 60rpx;overflow: hidden;margin-bottom: 20rpx;"
					class="bt_primary">
					<view style="display: flex;flex-direction: column;align-items: center;padding: 20rpx;" class="">
						<u-avatar size="150rpx" src="https://img01.yzcdn.cn/vant/cat.jpeg"></u-avatar>
						<text style="font-size: 24rpx; text-align: center;margin-top: 10rpx;">昵称</text>
					</view>
					<view style="display: flex;flex-direction: column;flex: 1;font-weight: 600;padding: 0 40rpx;"
						class="">
						<view style="flex: 1;display: flex;align-items: center;text-align: center;">原地址:升回去</view>
						<view style="flex: 1;display: flex;align-items: center;">送至:5栋2020</view>
					</view>
				</view>
			</view>
			<view v-show="current==2">
				<!-- 单个项目 -->
				<view v-for="item in 20" @click="handlerToPath(`/pages/pin-che-detail/pin-che-detail`)"
					style="display: flex;border-radius: 60rpx;overflow: hidden;margin-bottom: 20rpx;"
					class="bt_primary">
					<view style="justify-content: center;display: flex;flex-direction: column;align-items: center;padding: 20rpx;" class="">
						<u-avatar size="150rpx" src="https://img01.yzcdn.cn/vant/cat.jpeg"></u-avatar>
						<text style="font-size: 24rpx; text-align: center;margin-top: 10rpx;">昵称</text>
					</view>
					<view style="display: flex;flex-direction: column;flex: 1;font-weight: 600;padding: 0 40rpx;"
						class="">
						<view style="padding: 20rpx 0;flex: 1;display: flex;align-items: center;text-align: center;">起点:升回去</view>
						<view style="padding: 20rpx 0;flex: 1;display: flex;align-items: center;">终点:5栋2020</view>
						<view style="padding: 20rpx 0;flex: 1;display: flex;align-items: center;text-align: center;">所需人数:<text style="font-size: 60rpx;color: red;padding: 0 20rpx;">1</text>人</view>
						<view style="padding: 20rpx 0;flex: 1;display: flex;align-items: center;">出发时间:12/21 11:11:11 </view>
					</view>
				</view>
			</view>
			<view v-show="current==3">
				<!-- 单个项目 -->
				<view v-for="item in 20" @click="handlerToPath(`/pages/er-shou-detail/er-shou-detail`)"
					style="display: flex;border-radius: 60rpx;overflow: hidden;margin-bottom: 20rpx;"
					class="bt_primary">
					<view style="display: flex;flex-direction: column;align-items: center;padding: 20rpx;" class="">
						<u-avatar mode="square" size="150rpx" src="https://img01.yzcdn.cn/vant/cat.jpeg"></u-avatar>
						<text style="font-size: 24rpx; text-align: center;margin-top: 10rpx;">昵称</text>
					</view>
					<view style="display: flex;flex-direction: column;flex: 1;font-weight: 600;padding: 0 40rpx;"
						class="">
						<view style="flex: 1;flex: 1;display: flex;align-items: center;text-align: center;">物品名:升回去</view>
						<view style="flex: 1;display: flex;align-items: center;text-align: center;">价格:<text style="font-size: 50rpx;color: red;padding: 0 20rpx;">30.00 RMB</text></view>
						
					</view>
				</view>
			</view>
			<view v-show="current==4">
			<!-- 单个项目 -->
			<view v-for="item in 20" @click="handlerToPath(`/pages/qi-ta-detail/qi-ta-detail`)"
				style="display: flex;border-radius: 60rpx;overflow: hidden;margin-bottom: 20rpx;"
				class="bt_primary">
				<view style="display: flex;flex-direction: column;align-items: center;padding: 20rpx;" class="">
					<u-avatar size="150rpx" src="https://img01.yzcdn.cn/vant/cat.jpeg"></u-avatar>
					<text style="font-size: 24rpx; text-align: center;margin-top: 10rpx;">昵称</text>
				</view>
				<view style="display: flex;flex-direction: column;flex: 1;font-weight: 600;padding: 0 40rpx;"
					class="">
					<view style="flex: 0 0 50%;display: flex;align-items: center;text-align: center;" class="">主题:钱钱钱</view>
					<view style="flex: 0 0 40%;display: flex;align-items: center;overflow: hidden;" class=" u-line-2">
						内容:钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				tabList: [{
					name: "外卖/快递<br>代取",
					value: 1
				}, {
					name: "拼车",
					value: 2
				}, {
					name: "二手交易",
					value: 3
				}, {
					name: "其他",
					value: 4
				}]
			}
		},
		methods: {
			handlerToPath(path){
				uni.navigateTo({
					url:path
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.text-white {
		color: white !important;
	}

	.bg-127c72 {
		background: #127c72 !important;
	}
</style>